<template>
  <div class="bg-neutral text-dark antialiased">
    <HeroSection />
    <UpcomingAuctions />
    <FeaturedItems />
    <CategoriesSection />
    <AboutSection />
    <SubscribeSection />
    <BackToTop />
  </div>
</template>

<script setup>
import HeroSection from './components/HeroSection.vue'
import UpcomingAuctions from './components/UpcomingAuctions.vue'
import FeaturedItems from './components/FeaturedItems.vue'
import CategoriesSection from './components/CategoriesSection.vue'
import AboutSection from './components/AboutSection.vue'
import SubscribeSection from './components/SubscribeSection.vue'
import BackToTop from './components/BackTop.vue'
</script>

<style>
/* 引入Tailwind基础样式和工具类 */
@tailwind utilities;

/* 自定义工具类 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .hover-lift {
    transition: transform 0.3s ease;
  }
  .hover-lift:hover {
    transform: translateY(-5px);
  }
}

/* 组件样式 */
.bg-primary {
  background-color: #1a365d;
}

.bg-secondary {
  background-color: #8b5a2b;
}

.bg-neutral {
  background-color: #f5f5f0;
}

.bg-dark {
  background-color: #121212;
}

.text-primary {
  color: #1a365d;
}

.text-secondary {
  color: #8b5a2b;
}

.text-dark {
  color: #121212;
}
</style>
